<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <!--    搜索区    -->
        <!--   缴费项目列表   -->
        <el-col :span="8">
          <el-card style="height: calc(100vh - 125px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 缴费清单 </span>
              <pagination
                :pagerCount="5"
                layout="total, prev, pager, next"
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getPaymentList"
              />
            </div>

            <el-table
              v-loading="loading"
              :data="payList"
              :height="tableHeight"
              highlight-current-row
              @row-click="getPayStu"
              style="width: 100%"
            >
              <el-table-column label="序号" width="60" type="index"></el-table-column>

              <el-table-column label="缴费项目" align="center" prop="name"
                               :show-overflow-tooltip="true"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="16" id="printArea">
          <div>
            <el-empty description="暂无数据，请在左边选择要统计的缴费清单" v-if="stu_bookList.length<=0"></el-empty>
            <div v-else>
              <!--   结果     -->
              <el-card>
                <div slot="header">
                  <el-row :gutter="10">
                    <el-col :span="2">
                      <i class="el-icon-receiving"></i>
                    </el-col>
                    <el-col :span="10">
                      <span v-if="activity">
                        {{ activity }}
                      </span>
                    </el-col>
                    <el-col :span="6"><span>缴费情况</span></el-col>
                    <el-button type="primary" icon="el-icon-printer" size="mini"
                               v-print="'#printArea'" style="float: right; padding: 3px 0">
                      打印
                    </el-button>
                  </el-row>
                </div>
                <div class="el-table el-table--enable-row-hover el-table--medium">
                  <table cellspacing="0" style="width: 100%;">
                    <thead>
                    <tr>
                      <th class="el-table__cell el-table__cell is-leaf">
                        <div class="cell">班级</div>
                      </th>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">班级人数</div>
                      </th>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">名单人数</div>
                      </th>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">完成人数</div>
                      </th>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">未缴费人数</div>
                      </th>
                      <th class="el-table__cell is-leaf">
                        <div class="cell">完成百分比</div>
                      </th>
                      <!--                <th class="el-table__cell is-leaf">-->
                      <!--                  <div class="cell">完成百分比</div>-->
                      <!--                </th>-->
                    </tr>
                    </thead>
                    <tbody v-if="report">
                    <!--              <tr v-for="(sysFile, index) in server.sysFiles" :key="index">-->
                    <tr>
                      <td class="el-table__cell is-leaf">
                        <div class="cell" v-if="report.school">{{ report.school.deptName }}</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ report.total }}</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ report.totalAct }}</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ report.completed }}</div>
                      </td>
                      <td class="el-table__cell is-leaf">
                        <div class="cell">{{ report.incomplete }}</div>
                      </td>
                      <!--                <td class="el-table__cell is-leaf">-->
                      <!--                  <div class="cell">{{ report.percentage }}</div>-->
                      <!--                </td>-->
                      <td class="el-table__cell is-leaf">
                        <div class="cell" :class="{'text-danger': report.percentage > 80}">{{
                            report.percentage
                          }}%
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </el-card>

              <!--   详情     -->
              <el-card v-loading="loading" v-if="false">
                <div class="el-table el-table--enable-row-hover el-table--medium">
                  <table border="1" cellspacing="0" style="width: 100%;">
                    <tbody>
                    <tr>
                      <td :colspan="books.length+6">
                        <div class="cell" style="text-align: center">{{
                            orderTitle ? orderTitle : "请先设置查询条件"
                          }}
                        </div>
                      </td>
                    </tr>
                    <tr class="el-table__cell el-table__cell is-leaf">
                      <td :colspan="2">
                        <div class="cell">课程信息</div>
                      </td>
                      <td v-for="(course, index) in books" :key="index">
                        <div class="cell">{{ course.courseName }}</div>
                      </td>
                      <td :colspan="2">
                        <div class="cell">合计</div>
                      </td>
                      <td :colspan="2">
                        <div class="cell">签名</div>
                      </td>
                    </tr>
                    <tr class="el-table__cell el-table__cell is-leaf">
                      <td :colspan="2">
                        <div class="cell">教材信息</div>
                      </td>
                      <td v-for="(course, index) in books" :key="index">
                        <div class="cell">{{ course.courseBook }}</div>
                      </td>
                      <td :colspan="2">
                        <div class="cell"></div>
                      </td>
                      <td :colspan="2">
                        <div class="cell"></div>
                      </td>
                    </tr>
                    <tr class="el-table__cell el-table__cell is-leaf">
                      <td :colspan="2">
                        <div class="cell">单价</div>
                      </td>
                      <td v-for="(course, index) in books" :key="index">
                        <div class="cell">{{ course.price }}</div>
                      </td>
                      <td :colspan="2">
                        <div class="cell"></div>
                      </td>
                      <td :colspan="2">
                        <div class="cell"></div>
                      </td>
                    </tr>
                    <tr>
                      <td :colspan="1">
                        <div class="cell">序号</div>
                      </td>
                      <td :colspan="1">
                        <div class="cell">姓名</div>
                      </td>
                      <td :colspan="8">
                        <div class="cell">
                          {{ remake }}
                        </div>
                      </td>
                    </tr>
                    <tr v-for="(student, index) in stu_bookList" :key="index">
                      <!--    序号列        -->
                      <td :colspan="1">
                        <div class="cell">{{ index }}</div>
                      </td>
                      <!--    姓名列        -->
                      <td :colspan="1">
                        <div class="cell">{{ student.studentName }}</div>
                      </td>
                      <!--    订阅书籍   浏览     -->
                      <td :colspan="1" v-for="(course, index) in student.courses" :key="index">
                        <div class="cell">{{ course.subscribe ? course.price : "" }}</div>
                      </td>

                      <!--      合计价格      -->
                      <td :colspan="2">
                        <div class="cell">{{ student.totalPrice }}</div>
                      </td>
                      <!--      签名预留      -->
                      <td :colspan="2">
                        <div class="cell"></div>
                      </td>
                    </tr>
                    <!-- 合计行 -->
                    <tr>
                      <!--     合计表头字段       -->
                      <td :colspan="2">
                        <div class="cell">合计</div>
                      </td>
                      <!--     合计占位表格       -->
                      <td :colspan="books.length">
                        <div class="cell"></div>
                      </td>
                      <!--     总合计       -->
                      <td :colspan="2">
                        <div class="cell">{{ totalPrice }}</div>
                      </td>
                      <td :colspan="2">
                        <div class="cell"></div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </el-card>

              <el-card style="margin-top: 20px;">
                <!--   功能区          -->
                <el-dropdown :hide-on-click="false" style="float: right; padding: 3px 0">
                <span class="el-dropdown-link">
                  <el-button icon="el-icon-setting" circle/>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="field in columns" :key="field.key">
                      <el-checkbox :value="field.visible" @change="downChange(field.key)">{{ field.label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!--      订单    -->
                <el-table
                  ref="filterTable"
                  :data="ordersList"
                  style="width: 100%">
                  <el-table-column label="姓名" key="studentName" prop="student.studentName" v-if="columns[0].visible"/>
                  <el-table-column label="系统订单号" key="id" prop="id" v-if="columns[1].visible"/>
                  <el-table-column label="订单名称" key="orderName" prop="orderName" v-if="columns[2].visible"/>
                  <el-table-column label="订单金额" key="totalPrice" prop="totalPrice" v-if="columns[3].visible">
                    <template slot-scope="scope">
                      {{ (scope.row.totalPrice / 100).toFixed(2) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="订单状态" key="status" prop="status"
                                   :filters="ordersStatus"
                                   :filter-method="filterTag"
                                   filter-placement="bottom-end" v-if="columns[4].visible">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.trade_state" :value="scope.row.status"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="支付订单号" key="outPayNo" prop="outPayNo" v-if="columns[5].visible"/>
                  <el-table-column label="实付金额" key="totalPrice" prop="totalPrice" v-if="columns[6].visible">
                    <template slot-scope="scope">
                      {{ (scope.row.totalPrice / 100).toFixed(2) }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {deptSchoolTreeSelect} from "@/api/campus/Org";
import {paymentStatus, paymentYWStatus} from "@/api/report/act_stu";
import {listBookList} from "@/api/uniquefees/bookList";
import {deptStuBook} from "@/api/uniquefees/stu_book";

export default {
  name: "payment-status",
  components: {Treeselect},
  dicts: ['trade_state'],
  data() {
    return {
      // 总条数
      total: 0,
      // 缴费清单
      payList: [],
      //教材信息
      books: [],
      // 订购教程名单表格数据
      stu_bookList: [],
      totalPrice: 0,
      //报表信息
      report: {},
      // 遮罩层
      loading: true,
      tableHeight: window.innerHeight - 200,
      //搜索参数
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        semesterYear: null,
        semester: null,
        deptId: null,
        status: null,
        delFlag: null,
        sysOrgCode: null,
        code: null,
        name: null,
        school: null,
        college: null,
        major: null,
        clazz: null,
        grade: null,
        collegeId: null,
        schoolId: null,
        majorId: null,
        clazzId: null,
        headteacher: null,
        headteacherTel: null,
        headstudent: null,
        headstudentTel: null,
        issuanceDate: null,
        other: null,
        schoolYear: null,
        pricesum: null,
        booklistPic: null,
        bookListDetail: null
      },
      // 部门树选项
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 列信息
      columns: [
        {key: 0, label: `姓名`, visible: true},
        {key: 1, label: `系统订单号`, visible: false},
        {key: 2, label: `订单名称`, visible: false},
        {key: 3, label: `订单金额`, visible: true},
        {key: 4, label: `订单状态`, visible: true},
        {key: 5, label: `支付订单号`, visible: false},
        {key: 6, label: `实付金额`, visible: true}
      ],
      //项目名称
      activity: [],
      ordersStatus: [
        {text: '支付成功', value: 'SUCCESS'},
        {text: '转入退款', value: 'REFUND'},
        {text: '未支付', value: 'NOTPAY'},
        {text: '已关闭', value: 'CLOSED'},
        {text: '已撤销', value: 'REVOKED'},
        {text: '支付失败', value: 'PAYERROR'},
      ],
      ordersList: []

    };
  },
  created() {
    this.getPaymentList();
    // this.getDeptTree();
  },
  methods: {
    /** 查询缴费清单列表 */
    getPaymentList() {
      this.loading = true;
      listBookList(this.queryParams).then(response => {
        this.payList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** ===============================================部门节点================================================ */
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptSchoolTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },    // 筛选节点 --
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件 --
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },
    /** ===============================================部门节点================================================ */
    downChange(val) {
      console.log("key", val)
      const column = this.columns.find(col => col.key === val);
      console.log("col", column)
      if (column) {
        column.visible = !column.visible;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    filterTag(value, row) {
      return row.orders.status === value;
    },
    /**
     * 查询缴费学生
     * @param row
     */
    getPayStu(row) {
      this.activity = row.name
      this.payStuItem = []
      const queryParams = {
        deptId: null,
        scheduleId: row.id,
        semesterYear: null,
        semester: null
      }
      paymentYWStatus(queryParams).then(response => {
        this.report = response.data || {};
        this.stu_bookList = response.data.courseStu || [];
        this.books = response.data.courseBooks || [];
        this.totalPrice = response.data.totalPrice || 0;
        this.orderTitle = response.data.title || 0;
        this.ordersList = response.data.orders || []
      });
    }
  }
};
</script>
<style>
@media print {
  .do-not-print {
    display: none;
  }
}
</style>
